import { Routes, Route } from "react-router-dom";
import {lazy,Suspense} from "react";
 
const Home = lazy(() => import("@/pages/home")) 
const Login = lazy(() => import("@/pages/login")) 
const My = lazy(() => import("@/pages/my")) 
const Practice = lazy(() => import("@/pages/practice")) 
const Back = lazy(() => import("@/pages/back")) 

function RootRoute() :JSX.Element{
  return (
    <Suspense fallback={<h2>Loading..</h2>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/my" element={<My />} />
        <Route path="/practice" element={<Practice />} />
        <Route path="/back" element={<Back />} />
      </Routes>
    </Suspense>
  );
}
export default RootRoute